<template>
  <div class="index-container">
    <el-row :gutter="20">
      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
        <el-card class="box-card">
          <div style="display: flex; background: #fff; padding: 10px">
            <div class="page-header-content">
              <div class="avatar">
                <el-avatar size="large" :src="avatar"></el-avatar>
              </div>
              <div class="content">
                <div class="content-title">
                  你好，{{ username }}
                  <!-- <span class="welcome-text">，今天你最棒</span> -->
                </div>
                <div>项目经理 | 自动化所 -软包二部</div>
              </div>
            </div>
            <div class="extra-content">
              <div class="stat-item">
                <el-statistic title="进行中的项目数" :value="56" />
              </div>
              <div class="stat-item">
                <el-statistic title="延期工单数/总工单" :value="8" suffix="/ 24" />
              </div>
              <div class="stat-item">
                <el-statistic title="总项目数" :value="200" />
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="16" :md="16" :sm="16" :xl="16" :xs="16">
        <el-card class="box-card project" :body-style="{ padding: '10px' }">
          <div slot="header" class="clearfix">
            <span>进行中的项目</span>
            <el-button style="float: right; padding: 3px 0" type="text">全部项目</el-button>
          </div>
          <div>
            <el-col
              v-for="(item, index) in projectGroup.slice(0, 8)"
              :key="index"
              :lg="8"
              :md="8"
              :sm="6"
              :xl="6"
              :xs="6"
              class="project-list"
            >
              <router-link :to="{ path: '/project/item', query: { id: item.id } }">
                <el-card :bordered="false" :body-style="{ padding: '20px' }" shadow="hover">
                  <a-card-meta>
                    <div slot="title" class="card-title">
                      <!-- <el-tooltip class="item" effect="dark" :content="item.projectName" placement="top">
                       
                      </el-tooltip> -->
                      <a>{{ item.projectName }}</a>
                    </div>
                    <!-- <div slot="description" class="card-description">
                      本项目是来自亚马逊热带雨林最神秘而又古老的原始部落本项目是来自亚马逊热带雨林最神秘而又古老的原始部落本项目是来自亚马逊热带雨林最神秘而又古老的原始部落
                    </div> -->
                  </a-card-meta>
                  <div style="margin: 10px 0px">
                    <el-progress :percentage="index * 12" :color="customColorMethod"></el-progress>
                  </div>

                  <div class="project-item">
                    <a href="/#/">一部/王世浩</a>
                    <span class="datetime">2024-12-14</span>
                  </div>
                </el-card>
              </router-link>
            </el-col>
          </div>
        </el-card>
        <el-card class="box-card project">
          <div slot="header" class="clearfix" style="display: flex; align-items: center; justify-content: center">
            <div style="flex: 1">动态</div>
            <el-radio-group v-model="newKey">
              <el-radio-button :label="1">项目动态</el-radio-button>
              <el-radio-button :label="2">工单动态</el-radio-button>
            </el-radio-group>
          </div>
          <div>
            <el-table :data="projectData" max-height="500px" style="width: 100%" v-show="newKey == 1" :show-header="false">
              <el-table-column>
                <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper" style="display: flex; padding: 10px">
                    <div>
                      <el-tag size="medium" style="flex: 1" effect="dark">{{ scope.row.name }}</el-tag>
                    </div>
                    <div style="margin-left: 20px">
                      <div>
                        <el-tag size="medium" type="success" v-if="scope.row.opr == '新增'">{{ scope.row.opr }}</el-tag>
                        <el-tag size="medium" type="warning" v-if="scope.row.opr == '更新'">{{ scope.row.opr }}</el-tag>
                        <el-tag size="medium" type="danger" v-if="scope.row.opr == '删除'">{{ scope.row.opr }}</el-tag>
                        <a style="padding: 0px 10px">{{ scope.row.project }}</a>
                        数据导出及文件上传操作说明
                      </div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column width="120">
                <template slot-scope="scope">
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{ scope.row.date }}</span>
                </template>
              </el-table-column>
            </el-table>
            <el-table :data="workOrderData" max-height="500px" style="width: 100%" v-show="newKey == 2" :show-header="false">
              <el-table-column>
                <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper" style="display: flex; padding: 10px">
                    <div>
                      <el-tag size="medium" style="flex: 1" effect="dark">{{ scope.row.name }}</el-tag>
                    </div>
                    <div style="margin-left: 20px">
                      <div>
                        <el-tag size="medium" type="success" v-if="scope.row.opr == '新增'">{{ scope.row.opr }}</el-tag>
                        <el-tag size="medium" type="warning" v-if="scope.row.opr == '更新'">{{ scope.row.opr }}</el-tag>
                        <el-tag size="medium" type="danger" v-if="scope.row.opr == '删除'">{{ scope.row.opr }}</el-tag>
                        关于
                        <a>{{ scope.row.project }}</a>
                        的工单：
                      </div>
                      <div>plc和MSC的交互信号显示处，对于一些上料和下料公共信号，显示的时候需要根据上下文判断是下料还是上料</div>
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>

      <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
        <el-card class="box-card project" :body-style="{ padding: '10px' }">
          <div slot="header" class="clearfix">
            <span>快速入口</span>
          </div>
          <div>
            <el-col v-for="(item, index) in menuData" :key="index" :lg="8" :md="8" :sm="6" :xl="6" :xs="6">
              <router-link :to="item.link" v-if="item.link">
                <el-card shadow="hover" :body-style="{ padding: '10px' }" style="text-align: center; color: rgb(78, 89, 105); border: 0">
                  <div>
                    <i :class="item.icon" style="font-size: 24px" :style="{ color: item.color }"></i>
                  </div>
                  <div style="margin: 6px 0">
                    <span style="font-size: 15px">{{ item.title }}</span>
                  </div>
                </el-card>
              </router-link>
              <el-card shadow="hover" :body-style="{ padding: '10px' }" v-else style="border: 0">
                <div @click="disableClick(item.title)" style="text-align: center; color: rgb(78, 89, 105); cursor: pointer">
                  <div>
                    <i :class="item.icon" style="font-size: 24px" :style="{ color: item.color }"></i>
                  </div>
                  <div style="margin: 6px 0">
                    <span style="font-size: 15px">{{ item.title }}</span>
                  </div>
                </div>
              </el-card>
            </el-col>
          </div>
        </el-card>
        <el-card class="box-card project">
          <div slot="header" class="clearfix" style="display: flex; align-items: center; justify-content: center">
            <div style="flex: 1">统计</div>
            <el-radio-group v-model="chartKey">
              <el-radio-button :label="1">项目统计</el-radio-button>
              <el-radio-button :label="2">工单统计</el-radio-button>
            </el-radio-group>
          </div>
          <div>
            <el-card shadow="never" :body-style="{ padding: '20px' }" v-show="chartKey == 1">
              <vab-chart autoresize :option="xmtj" style="height: 280px" />
            </el-card>
            <el-card shadow="never" :body-style="{ padding: '20px' }" v-show="chartKey == 2">
              <vab-chart autoresize :option="gdtj" style="height: 280px" />
            </el-card>
          </div>
        </el-card>
        <el-card class="box-card project">
          <div slot="header" class="clearfix">
            <span>通知公告</span>
            <el-button style="float: right; padding: 3px 0" type="text">全部公告</el-button>
          </div>
          <div>
            <el-table :data="NoticesData" max-height="500px" style="width: 100%" :show-header="false">
              <el-table-column>
                <div style="display: flex; padding: 10px">
                  <div>
                    <el-tag size="medium">公告</el-tag>
                  </div>
                  <div style="flex: 1; margin: 0px 6px">最新公告通知，今晚8:00系统重启，请注意备份资料并安全退出</div>
                </div>
              </el-table-column>
              <el-table-column width="120">
                <template slot-scope="scope">
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{ scope.row.date }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import VabChart from '@/plugins/echarts'
  import { getProjectGroup } from '@/api/wordOrder'
  export default {
    name: 'Index',
    computed: {
      ...mapGetters({
        avatar: 'user/avatar',
        username: 'user/username',
      }),
    },
    components: {
      VabChart,
    },
    data() {
      return {
        menuData: [
          { title: '项目管理', icon: 'el-icon-folder-opened', link: '/project/index', color: '#30e0e0' },
          // { title: '工单管理', icon: 'el-icon-document-copy', link: '/workList/index', color: '#cd5c5c' },
          // { title: '共享云盘', icon: 'el-icon-coin', link: '', color: '#6495ed' },
          // { title: '知识库', icon: 'el-icon-collection', link: '', color: '#1e90ff' },
          { title: '报警统计', icon: 'el-icon-alarm-clock', link: '/alarmStatistics/alarmIndex', color: '#F56C6C' },
          // { title: '报警录入', icon: 'el-icon-alarm-clock', link: '/alarmStatistics/alarmList', color: '#F56C6C' },
        ],
        projectData: [
          {
            date: '2024-12-25',
            name: '姚依园',
            opr: '新增',
            project: '24K0031-1G01/2/3-沧州远景-OCV',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2024-12-25',
            name: '姚依园',
            opr: '删除',
            project: '24K0031-1G01/2/3-沧州远景-OCV',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2024-12-25',
            name: '姚依园',
            opr: '删除',
            project: '24K0031-1G01/2/3-沧州远景-OCV',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2024-12-25',
            name: '姚依园',
            opr: '更新',
            project: '24K0031-1G01/2/3-沧州远景-OCV',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2024-12-25',
            name: '姚依园',
            opr: '更新',
            project: '24K0031-1G01/2/3-沧州远景-OCV',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2024-12-25',
            name: '姚依园',
            opr: '新增',
            project: '24K0031-1G01/2/3-沧州远景-OCV',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2024-12-25',
            name: '姚依园',
            opr: '新增',
            project: '24K0031-1G01/2/3-沧州远景-OCV',
            address: '上海市普陀区金沙江路 1518 弄',
          },
        ],
        workOrderData: [
          {
            date: '2024-12-25',
            name: '王世浩',
            opr: '新增',
            project: '24K0031-1G01/2/3-沧州远景-OCV',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2024-12-25',
            name: '王世浩',
            opr: '删除',
            project: '24K0031-1G01/2/3-沧州远景-OCV',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2024-12-25',
            name: '王世浩',
            opr: '删除',
            project: '24K0031-1G01/2/3-沧州远景-OCV',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2024-12-25',
            name: '王世浩',
            opr: '更新',
            project: '24K0031-1G01/2/3-沧州远景-OCV',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2024-12-25',
            name: '王世浩',
            opr: '更新',
            project: '24K0031-1G01/2/3-沧州远景-OCV',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2024-12-25',
            name: '王世浩',
            opr: '新增',
            project: '24K0031-1G01/2/3-沧州远景-OCV',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2024-12-25',
            name: '王世浩',
            opr: '新增',
            project: '24K0031-1G01/2/3-沧州远景-OCV',
            address: '上海市普陀区金沙江路 1518 弄',
          },
        ],
        NoticesData: [{ date: '2024-12-25' }, { date: '2024-12-25' }],
        newKey: 1,
        chartKey: 1,
        projectGroup: [],
        currentWeek: '',
        startDate: '',
        endDate: '',
        totalBar: {
          totalWeekBeforeNoFinishAllNum: '',
          totalWeekAllNum: '',
          totalWeekAllFinishNum: '',
        },
        departmentBar: {
          oneNum: { totalWeekNum: '', totalWeekFinishNum: '' },
          twoNum: { totalWeekNum: '', totalWeekFinishNum: '' },
          threeNum: { totalWeekNum: '', totalWeekFinishNum: '' },
          lowerMachineNum: { totalWeekNum: '', totalWeekFinishNum: '' },
          innovationNum: { totalWeekNum: '', totalWeekFinishNum: '' },
        },
        WordOrderListByCustomerDemand: [],
        fixtureMachineList: [],
        singleMachineList: [],
        //工单统计图
        xData: [0, 0, 0, 0, 0],
        yData: [0, 0, 0, 0, 0],
        xmtj: {
          title: {},
          color: ['#30e0e0', '#00fa9a'],
          tooltip: {
            trigger: 'axis',
          },
          grid: {
            top: '5%',
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true,
          },
          // legend: {
          //   x: 'left',
          //   y: 'center',
          //   orient: 'vertical',
          // },
          toolbox: {
            show: false,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          calculable: false,
          xAxis: [
            {
              type: 'category',
              data: ['一部', '二部', '三部', '下位机', '公共创新'],
            },
          ],
          yAxis: [
            {
              type: 'value',
              minInterval: 1,
            },
          ],
          series: [
            {
              name: '本周新增',
              type: 'bar',
              data: [112, 23, 34, 440, 54],
            },
            {
              name: '本周完成',
              type: 'bar',
              data: [22, 55, 66, 44, 22],
            },
          ],
        },
        gdtj: {
          title: {},
          color: ['#da70d6', '#ffa500'],
          tooltip: {
            trigger: 'axis',
          },
          grid: {
            top: '5%',
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true,
          },
          // legend: {
          //   x: 'left',
          //   y: 'center',
          //   orient: 'vertical',
          // },
          toolbox: {
            show: false,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          calculable: false,
          xAxis: [
            {
              type: 'category',
              data: ['一部', '二部', '三部', '下位机', '公共创新'],
            },
          ],
          yAxis: [
            {
              type: 'value',
              minInterval: 1,
            },
          ],
          series: [
            {
              name: '本周新增',
              type: 'bar',
              data: [10, 20, 30, 40, 50],
            },
            {
              name: '本周完成',
              type: 'bar',
              data: [70, 60, 50, 40, 30],
            },
          ],
        },
      }
    },
    created() {
      this.init()
    },
    beforeDestroy() {},
    methods: {
      init() {
        this.fetchProjectData()
      },
      disableClick(title) {
        this.$baseNotify(`${title}功能开发中，别瞎点！`, '注意点', 'error', 'top-right')
      },
      async fetchProjectData() {
        const { data } = await getProjectGroup()
        this.projectGroup = data
      },
      customColorMethod(percentage) {
        if (percentage < 30) {
          return '#909399'
        } else if (percentage < 50) {
          return '#E6A23C'
        } else if (percentage < 70) {
          return '#409EFF'
        } else {
          return '#67c23a'
        }
      },
      updateCharts() {
        this.gdtj.series[0].data = []
        this.gdtj.series[1].data = []
        this.gdtj.series[0].data = this.xData
        this.gdtj.series[1].data = this.yData
      },
    },
  }
</script>
<style lang="scss" scoped>
  .project-list {
    cursor: pointer;
    .card-title {
      font-size: 0;

      a {
        color: rgba(0, 0, 0, 0.85);
        line-height: 24px;
        height: 24px;
        display: inline-block;
        vertical-align: top;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 220px;

        &:hover {
          color: #1890ff;
        }
      }
    }

    .card-description {
      color: rgba(0, 0, 0, 0.45);
      height: 42px;
      line-height: 22px;
      overflow: hidden;
      margin: 20px 0px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      word-break: break-all;
    }

    .project-item {
      display: flex;
      margin-top: 8px;
      overflow: hidden;
      font-size: 12px;
      height: 20px;
      line-height: 20px;

      a {
        color: rgba(0, 0, 0, 0.45);
        display: inline-block;
        flex: 1 1 0;

        &:hover {
          color: #1890ff;
        }
      }

      .datetime {
        color: rgba(0, 0, 0, 0.25);
        flex: 0 0 auto;
        float: right;
      }
    }

    .ant-card-meta-description {
      color: rgba(0, 0, 0, 0.45);
      height: 44px;
      line-height: 22px;
      overflow: hidden;
    }
  }

  .project {
    ::v-deep {
      .el-card__body {
        padding: 0;
      }
    }
  }
  .page-header-content {
    display: flex;
    flex: 1;
    .avatar {
      flex: 0 1 48px;

      & > span {
        display: block;
        width: 48px;
        height: 48px;
        border-radius: 48px;
      }
    }

    .content {
      margin-left: 24px;
      line-height: 18px;
      flex: 1 1 auto;
      align-content: center;
      .content-title {
        margin-bottom: 4px;
        font-size: 18px;
        font-weight: 500;
        line-height: 20px;
      }
    }
  }
  .extra-content {
    display: flex;
    .stat-item {
      padding: 0 20px;
      > p:first-child {
        font-size: 14px;
        line-height: 16px;
        color: #595959;
      }

      > p {
        margin: 0;
        font-size: 20px;
        line-height: 28px;
        color: #595959;

        > span {
          font-size: 16px;
          color: #595959;
        }
      }

      &:last-child {
        padding-right: 0;

        &::after {
          display: none;
        }
      }
    }
  }
  .index-container {
    padding: 0 !important;
    margin: 0 !important;
    background: #f5f7f8 !important;

    ::v-deep {
      .el-alert {
        padding: $base-padding;

        &--info.is-light {
          min-height: 82px;
          padding: $base-padding;
          margin-bottom: 15px;
          color: #909399;
          background-color: $base-color-white;
          border: 1px solid #ebeef5;
        }
      }

      .el-card__body {
        .echarts {
          width: 100%;
          height: 115px;
        }
      }
    }

    .card {
      ::v-deep {
        .el-card__body {
          .echarts {
            width: 100%;
            height: 305px;
          }
        }
      }
    }

    .bottom {
      padding-top: 20px;
      margin-top: 5px;
      color: #595959;
      text-align: left;
      border-top: 1px solid $base-border-color;
    }

    .table {
      width: 100%;
      color: #666;
      border-collapse: collapse;
      background-color: #fff;

      td {
        position: relative;
        min-height: 20px;
        padding: 9px 15px;
        font-size: 14px;
        line-height: 20px;
        border: 1px solid #e6e6e6;

        &:nth-child(odd) {
          width: 20%;
          text-align: right;
          background-color: #f7f7f7;
        }
      }
    }

    .icon-panel {
      height: 117px;
      text-align: center;
      cursor: pointer;

      svg {
        font-size: 40px;
      }

      p {
        margin-top: 10px;
      }
    }

    .bottom-btn {
      button {
        margin: 5px 10px 15px 0;
      }
    }
  }
</style>
